<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <base tal:attributes="href string:/landing/${build_path}"></base>

  <title><tal tal:replace="portal_name|nothing">mist.io</tal> :: open source multi-cloud management platform</title>
  <meta name="description" content="A secure cloud management platform for automation, orchestration, cost and usage monitoring of public and private clouds, hypervisors and container hosts. Provides multi-cloud RBAC. Enables self service provisioning. Cost analysis and cloud spending optimization">

  <link tal:condition="theme|nothing" rel="shortcut icon" sizes="32x32" tal:attributes="href string:/static/${theme}-favicon.ico">
  <link tal:condition="not theme" rel="shortcut icon" sizes="32x32" tal:attributes="href string:images/mist-icon-32.png">

  <meta name="theme-color" content="#fff">
  <link rel="manifest" href="manifest.json">

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async tal:condition="google_analytics_id"
          src="https://www.googletagmanager.com/gtag/js?id=${google_analytics_id}"></script>
  <script tal:condition="google_analytics_id">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '${google_analytics_id}', {
      'custom_map': {'app': 'landing'}
    });
    gtag('set', {'content_group1': 'landing'});
  </script>

  <script tal:condition="csrf_token|nothing" tal:content="string: var CSRF_TOKEN=${csrf_token}"></script>
  <script tal:condition="categories|nothing" tal:content="string: var CATEGORIES=${categories}"></script>
  <script tal:content="string: var True = true, False = false, CONFIG = {'features': ${structure:features}, 'email': ${email}, 'portalName': '${portal_name}', 'stripeKey': '${stripe_public_apikey|nothing}'}">
      var CONFIG = false;
  </script>
  <script src="/landing/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <script>
    // setup Polymer options
    window.Polymer = {lazyRegister: true};

    var ANIMATIONS = false;
    // Disable animations in Polyfilled browsers for now
    if ('registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template'))
          ANIMATIONS = true;
  </script>

  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      box-sizing: border-box;
    }
    
    @font-face {
      font-family: "Roboto";
      src: local(Roboto Thin), url("fonts/roboto/Roboto-Thin.eot");
      src: url("fonts/roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("fonts/roboto/Roboto-Thin.woff") format("woff"), url("fonts/roboto/Roboto-Thin.ttf") format("truetype");
      font-weight: 200;
    }

    @font-face {
      font-family: "Roboto";
      src: local(Roboto Light), url("fonts/roboto/Roboto-Light.eot");
      src: url("fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("fonts/roboto/Roboto-Light.woff2") format("woff2"), url("fonts/roboto/Roboto-Light.woff") format("woff"), url("fonts/roboto/Roboto-Light.ttf") format("truetype");
      font-weight: 300;
    }

    @font-face {
      font-family: "Roboto";
      src: local(Roboto Regular), url("fonts/roboto/Roboto-Regular.eot");
      src: url("fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("fonts/roboto/Roboto-Regular.woff") format("woff"), url("fonts/roboto/Roboto-Regular.ttf") format("truetype");
      font-weight: 400;
    }

    @font-face {
      font-family: "Roboto";
      src: url("fonts/roboto/Roboto-Medium.eot");
      src: url("fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("fonts/roboto/Roboto-Medium.woff") format("woff"), url("fonts/roboto/Roboto-Medium.ttf") format("truetype");
      font-weight: 500;
    }

    @font-face {
      font-family: "Roboto";
      src: url("fonts/roboto/Roboto-Bold.eot");
      src: url("fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("fonts/roboto/Roboto-Bold.woff") format("woff"), url("fonts/roboto/Roboto-Bold.ttf") format("truetype");
      font-weight: 700;
    }


    @media only screen and (max-width: 993px) {
        body {
            font-size: 16px;
        }
    }
    html {
      font-size: 14px;
      line-height: 1.5;
      font-family: "Roboto", sans-serif;
      font-weight: normal;
      color: rgba(0, 0, 0, 0.87);
    }

    @media only screen and (min-width: 0) {
      html {
        font-size: 14px;
      }
    }

    @media only screen and (min-width: 992px) {
      html {
        font-size: 14.5px;
      }
    }

    @media only screen and (min-width: 1200px) {
      html {
        font-size: 15px;
      }
    }

    body {
      position: relative;
      font-size: 18px;
      color: #444;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    landing-app[unresolved] > div.page, landing-app[unresolved] > div.tabs {
      display: none;
    }

    /* styling for render while resources are loading */
    landing-app[unresolved] {
      background-color: #f2f2f2;
      display: block;
      min-height: 101vh;
      line-height: 68px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.3em;
      color: #202020;
      padding: 0 16px;
      overflow: visible;
    }

    landing-app[unresolved] .lds-ripple {
      top: 42%;
      left: 48%;
      display: inline-block;
      position: absolute;
      width: 64px;
      height: 64px;
    }
    landing-app[unresolved] .lds-ripple div {
      position: absolute;
      border: 4px solid #444;
      opacity: 1;
      border-radius: 50%;
      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }
    landing-app[unresolved] .lds-ripple div:nth-child(2) {
      animation-delay: -0.5s;
    }
    @keyframes lds-ripple {
      0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
      }
      100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
      }
    }

    div.wave {
      border-radius: 50%;
      background: black;
      width: 4000px;
      height: 4000px;
      position: fixed;
      -webkit-user-select: none;
      user-select: none;
      overflow: hidden;
      z-index: 10;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="src/style.css">
</head>
<body>
  <landing-app unresolved>
    <div slot="tabs" class="tabs">
      <dom-repeat>
        <template>
          <landing-tab hidden="[[item.hiddenFromMenu]]">
              <a name="[[item.name]]" href="[[item.href]]" target="new">[[item.title]]</a>
          </landing-tab>
        </template>
      </dom-repeat>
    </div>

    <div class="page" slot="content" title="">
      <div tal:replace="structure section" tal:condition="section|nothing"></div>
    </div>
    <div class="lds-ripple"><div></div><div></div></div>
  </landing-app>

  <script>
    if (CONFIG) {
      document.querySelector('landing-app').config = CONFIG;
      var repeater = document.querySelector('dom-repeat');
      var categories = CATEGORIES;
      repeater.items = categories;
    }
  </script>
  <link rel="import" href="src/landing-app.html">
  <!-- CUSTOM THEME -->
  <link slot="theme" rel="import" tal:condition="theme|nothing" tal:attributes="href string:/static/landing/${theme}-theme.html">
  <!-- CUSTOM THEME END-->
  <!-- Facebook Pixel Code -->
  <script tal:condition="fb_id|nothing" tal:content="string: var FB_ID='${fb_id}'"></script>
  <script tal:condition="fb_id|nothing">
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  document,'script','//connect.facebook.net/en_US/fbevents.js');

  fbq('init', FB_ID);
  fbq('track', "PageView");
  </script>
  <noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=1647503578815528&ev=PageView&noscript=1"
  /></noscript>
  <!-- End Facebook Pixel Code -->

  <!-- begin olark code -->
  <script tal:condition="olark_id|nothing" tal:content="string: var OLARK_ID='${olark_id}'"></script>
  <script tal:condition="olark_id|nothing" data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
  f[z]=function(){
  (a.s=a.s||[]).push(arguments)};var a=f[z]._={
  },q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
  f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
  0:+new Date};a.P=function(u){
  a.p[u]=new Date-a.p[0]};function s(){
  a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
  hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
  return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
  b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
  b.contentWindow[g].open()}catch(w){
  c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
  var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
  b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
  loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
  /* custom configuration goes here (www.olark.com/documentation) */
  olark.identify(OLARK_ID);/*]]>*/</script><noscript><a href="https://www.olark.com/site/5179-329-10-7357/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
  <!-- end olark code -->

</body>
</html>
